<template>
	<div id="footer">
		<ul>
			<li>
				<router-link to='/yemao'>
					<div></div>
				</router-link>
			</li>
			<li>
				<router-link to='/supers'>
					<div></div>
				</router-link>
			</li>
			<li>
				<router-link to='/mine'>
					<div></div>
				</router-link>
			</li>
			<li>
				<router-link to='/personal'>
					<div></div>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	
</script>

<style scoped>
	#footer{
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		box-sizing:border-box;
		border-top:0.027027rem solid #d7d7d7;
		padding-top:0.104324rem;
		background:#fff;
	}
	#footer ul{
		display: flex;
	}
	#footer ul li{
		display:flex;
		width:25%;
		justify-content: center;
		padding: 0 0 0.1rem 0;
	}	
	#footer ul li div{
		width:1rem;
		height:1.12rem;
	}
	#footer ul li:first-of-type div{
		background: url(../../assets/images/yemao0.png);
		background-size: cover;
	}
	
	#footer ul li:nth-of-type(2) div{
		background: url(../../assets/images/super0.png);
		background-size: cover;
	}
	
	#footer ul li:nth-of-type(3) div{
		background: url(../../assets/images/mine0.png);
		background-size: cover;
	}
	
	#footer ul li:nth-of-type(4) div{
		background: url(../../assets/images/personal0.png);
		background-size: cover;
	}
	
	#footer  ul li:first-of-type .router-link-active div{
		background: url(../../assets/images/yemao.png);
		background-size: cover;
	}
	#footer  ul li:nth-child(2) .router-link-active div{
		background: url(../../assets/images/super.png);
		background-size: cover;
	}
	#footer  ul li:nth-child(3) .router-link-active div{
		background: url(../../assets/images/mine.png);
		background-size: cover;
	}
	#footer  ul li:nth-child(4) .router-link-active div{
		background: url(../../assets/images/personal.png);
		background-size: cover;
	}
</style>